<template>
  <div>
    <!-- 策略统计 -->
    <div style="background-color: #44AAEE;color: #fff;padding: 10px 20px;border-top-left-radius:5px;border-top-right-radius:5px;" v-loading="tjLoading">
      <div style="margin: 4px 0;">
        <span>本月统计：</span>
        <span style="min-width: 85px;display: inline-block;">数量(<span style="color:#ffcc19;font-size:16px;font-weight:700;">{{ tjRetObj.cm_count}}</span>)</span>
        <span>成功率(<span style="color:#ffcc19;font-size:16px;font-weight:700;">{{ tjRetObj.cm_success_rate}}</span>)</span>
      </div>
      <div style="margin: 4px 0;">
        <span>本年统计：</span>
        <span style="min-width: 85px;display: inline-block;">数量(<span style="color:#ffcc19;font-size:16px;font-weight:700;">{{ tjRetObj.cy_count}}</span>)</span>
        <span>成功率(<span style="color:#ffcc19;font-size:16px;font-weight:700;">{{ tjRetObj.cy_success_rate}}</span>)</span>
      </div>
      <div style="margin: 4px 0;">
        <span>策略总计：</span>
        <span style="min-width: 85px;display: inline-block;">数量(<span style="color:#ffcc19;font-size:16px;font-weight:700;">{{ tjRetObj.t_count}}</span>)</span>
        <span>成功率(<span style="color:#ffcc19;font-size:16px;font-weight:700;">{{ tjRetObj.t_success_rate}}</span>)</span>
      </div>
    </div>
    <!-- 策略显示 -->
    <div style="margin: 10px" v-loading="strategyLoading">
      <div v-for=" item, index in strategyList" :key="item.id">
        <div class="strategy-box">
          <div v-if="item.examine_state!==1" style="color: #ff5300;margin-bottom:5px;">[无效]</div>
          <div class="title">
            <span>{{ item.create_time }}</span>
            <span class="actions"><i class="el-icon-delete-solid" @click="toDeleteStrategy(item)">删除</i></span>
          </div>
          <div style="margin: 10px 0; font-size: 16px;">
            {{ item.content }}
          </div>
          <div><span style="color: #999;font-size: 11px;">{{ item.variety_name }}  {{ item.hands }}手</span></div>
          <div style="margin-top: 8px;padding-top: 8px;border-top: 1px dashed #999;">
            <span v-if="item.open_time"> <!-- 策略已开仓 -->
              <span v-if="item.close_time"> <!-- 策略结束 -->
                <span>策略状态：<span :class="item.profit>0?'red-text':'green-text'">{{ item.profit>0?'盈利结束':'止损结束'}}</span></span>
                <el-divider  direction="vertical"></el-divider>
                <span>策略结果：<span :class="item.profit>0?'red-text':'green-text'">{{ item.profit == 0?'':item.profit }}</span></span>
              </span>
              <span v-else> <!-- 运行中 -->
                <span v-if="item.type>1">策略结果:<el-input size="mini" style="width: 260px;margin:0 5px;" placeholder="套利策略平仓时需先在此填写结果!" v-model="item.profit"></el-input></span>
                <span>右侧点击平仓：
                  <span class="cutloss-button" @click="toCloseStrategy(item, index, 'cutloss')"><i class="el-icon-bottom"></i>触发止损</span>
                  <span class="target-button" @click="toCloseStrategy(item, index, 'target')"><i class="el-icon-top"></i>触发目标</span>
                </span>
              </span>
            </span>
            <span v-else>
              <span v-if="item.close_time">
                <span>策略状态：<span class="green-text">失效结束</span></span>
              </span>
              <span v-else>开仓方式：
                <span style="cursor: pointer;color: #1386D2;" @click="toBuildStrategy(item,index)">点击建仓</span>
                <el-divider  direction="vertical"></el-divider>
                <span style="cursor: pointer;color: #41B584;" @click="toCloseStrategy(item,index,'forced')">失效结束</span>
              </span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div style="margin: 10px;">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :current-page="page"
        :page-size="pageSize"
        :total="totalCount" @current-change="paginatorPageChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { getMyStrategy, openMyStrategy, closeMyStrategy, tjMyStrategy, deleteStrategy } from '@/api/departmentWork/strategy'
  export default{
    data(){
      return {
        tjLoading: false,
        tjRetObj: {},
        strategyLoading: false,
        page: 1,
        pageSize: 10,
        totalCount: 0,
        strategyList: []
      }
    },
    mounted() {
      this.queryTjStrategy()
      this.queryStrategy()
    },
    methods:{
      // 统计我的策略
      queryTjStrategy(){
        this.tjLoading = true
        tjMyStrategy().then(res => {
          this.tjRetObj = res.data
          this.tjLoading = false
        }).catch(err => {this.tjLoading = false})
      },
      // 页码改变
      paginatorPageChange(page){
        this.page = page
        this.queryStrategy()
      },
      queryStrategy(){
        this.strategyLoading = true
        const params = {
          page: this.page,
          page_size: this.pageSize
        }
        getMyStrategy(params).then(res => {
          this.strategyList = res.data.data
          this.page = res.data.page
          this.paegSize = res.data.page_size
          this.totalCount = res.data.total_count
          this.strategyLoading = false
        })
      },
      // 获取策略索引
      getStrategyIndex(sid){
        let index = -1
        for(let i=0;i<this.strategyList.length;i++){
          if (this.strategyList[i].id == sid){
            index = i
            break
          }
        }
        return index
      },
      // 策略建仓
      toBuildStrategy(strategyItem, index) {
        this.$baseConfirm('确定策略开仓吗?', null, async () => {
          openMyStrategy({ strategy_id: strategyItem.id }).then((res) => {
            this.$baseMessage(res.msg, 'success')
            const strategyData = res.data
            this.strategyList.splice(index, 1, strategyData)
          })
        })
      },
      // 策略平仓
      toCloseStrategy(strategyItem,index,closeType){
        const tipMsg = closeType == 'target'?'确定【触发目标】结束策略吗？': closeType == 'cutloss'?'确定【止损】结束策略吗？':'确定【未建仓】策略失效吗？'
        if (closeType == 'cutloss' && strategyItem.type>1 && strategyItem.profit >0){
          this.$baseMessage('止损策略结果需小于0！', 'error')
          return false
        }
        this.$baseConfirm(tipMsg, null, async () => {
          const putData = {
            strategy_id: strategyItem.id,
            close_flag: closeType,
            profit: strategyItem.profit
          }
          closeMyStrategy(putData).then(res => {
            this.$baseMessage(res.msg, 'success')
            const strategyData = res.data
            this.strategyList.splice(index,1,strategyData)
          })
        })
      },

      // 删除策略
      toDeleteStrategy(item){
        this.$baseConfirm('确定删除策略吗?', null, ()=> {
          deleteStrategy(item.id).then(res => {
            this.$baseMessage(res.msg, res.code === 200?'success':'error')
            if (res.code === 200){
              this.queryStrategy()
            }
          })
        })      
      }
    }
  }
</script>

<style scoped lang="scss">
.show-action{opacity: 1;}
.strategy-box{
  margin-bottom: 15px;
  padding: 10px;
  border-radius:4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  .title{
    color: #1386D2;
    font-weight:700;
    .actions{
      margin-left:100px;
      color:#FF430D;
      font-size:13px;
      cursor:pointer;
      opacity: 0;
      transition: opacity .1s;
    }
  }
  &:hover{
    .title .actions{
      @extend .show-action;
    }
  }
}
  .cutloss-button{
    color: #41B584;cursor: pointer;margin-right: 10px;
  }
  .target-button{
    color: #F34D37;cursor: pointer;
  }
  .red-text{
    color: #F34D37;
  }
  .green-text{
    color: #41B584;
  }
</style>
